<template>
  <div class="order-item">
    <div class="order-item__content">
      <img class="order-item__image" :src="goodsInfo.photos" style="height: 150px; width: 102px" />
      <div class="order-item__details">
        <div class="order-item__left">
          <h2 class="order-item__name">{{ goodsInfo.name }}</h2>
          <p class="order-item__description">描述：{{ goodsInfo.descInfo }}</p>
        </div>
        <div class="order-item__right">
          <p class="order-item__price">价格：¥ {{ goodsInfo.price }}</p>
          <p class="order-item__quantity">数量：{{ goodsInfo.sum }}</p>
        </div>
      </div>
    </div>
    <el-tag v-for="text in goodsInfo.tag.split('、')">{{ text }}</el-tag>
    <div class="order-item__actions">
      <button class="order-item__button order-item__button--service" @click="sureDelete = true">
        删除物品
      </button>
      <button class="order-item__button order-item__button--buy-again" @click="emit('updateItem')">
        修改信息
      </button>
    </div>
    <el-dialog v-model="sureDelete" title="删除物品" width="500">
      <span>
        你确定要删除
        <span style="color: rgb(255, 112, 15)">{{ goodsInfo.name }}</span>
        吗？
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="sureDelete = false">取消</el-button>
          <el-button type="primary" @click="deleteGoods">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { deleteGoodsInfo } from '@/api/goods'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'

const props = defineProps({
  item: Object
})

const emit = defineEmits(['updateItem', 'deleteItemSuccess'])

const goodsInfo = ref(props.item)

watch(
  () => props.item,
  (newValue) => {
    goodsInfo.value = newValue
  },
  {
    deep: true,
    immediate: true
  }
)

const sureDelete = ref(false)

// 删除商品
const deleteGoods = async () => {
  const res = (await deleteGoodsInfo(goodsInfo.value.id)).data
  if (res.code == 504) {
    ElMessage.error(res.msg)
    return
  }
  ElMessage.success('删除成功')
  emit('deleteItemSuccess')
  sureDelete.value = false
}
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

.el-tag {
  margin: 5px 2px 0 5px;
}

.order-item {
  padding: 16px;
  margin: 16px 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  position: relative;
}

.order-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.order-item__shop {
  width: 100%;
  position: absolute;
  top: 16px;
  left: 16px;
  font-weight: bold;
  color: #fff;
  padding-left: 5px;
  background-color: rgb(255, 112, 15);
}

.order-item__content {
  display: flex;
  padding-top: 40px; /* To avoid overlapping with shop name */
}

.order-item__image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 16px;
}

.order-item__details {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.order-item__left {
  flex: 1;
}

.order-item__name {
  font-size: 16px;
  margin: 0 0 8px;
  color: #333;
}

.order-item__description {
  font-size: 14px;
  margin: 4px 0;
  color: #999;
}

.order-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.order-item__price {
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 112, 15);
  margin: 0;
}

.order-item__quantity {
  font-size: 14px;
  color: #666;
  margin: 4px 0 16px;
}

.order-item__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.order-item__button {
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.order-item__button--service {
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
}

.order-item__button--service:hover {
  background-color: #000;
  color: #fff;
}

.order-item__button--buy-again {
  border: 1px solid #ffa500;
  background-color: transparent;
  color: #ffa500;
}

.order-item__button--buy-again:hover {
  background-color: #ffa500;
  color: #fff;
}
</style>
